<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="white" />
  <meta name="renderer" content="webkit" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no,email=no,address=no" />
  <meta name="ML-Config" content="fullscreen=yes,preventMove=no" />

  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />
  <meta http-equiv="Cache" content="no-cache" />
  <meta charset="UTF-8" />
  <title></title>

  <style>
    body,
    html {
      background-color: #ffffff;
      /* height: 100%; */
      padding: 0;
      margin: 0;
    }

    .page {
      border: 0;
      margin: 0 auto;
      border-bottom: 5px solid #f2f5fa;
    }

    .back {
      flex: 1;
      display: flex;
      height: 44px;
    }

    .back img {
      width: 22px;
      height: 22px;
      margin: 11px 0 0 10px;
    }

    .back button {
      border: none;
      background-color: #ffffff;
      font-size: 19px;
    }

    .navbar {
      display: flex;
    }

    .navbar .text {
      flex: 1;
      line-height: 44px;
      font-size: 19px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .navbar .ab {
      flex: 1;
    }

    canvas {
      max-width: 750px !important;
      height: auto !important;
    }
  </style>
</head>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="pdf.js"></script>

<body id="body">
  <div class="navbar" id="navbar">
    <div class="back">
      <img id="backImg" src="#" alt="" />
      <button class="back-icon" type="button" data-action="navigateBack">
        返回
      </button>
    </div>
    <div class="text"></div>
    <div class="ab"></div>
  </div>
</body>
<script type="text/javascript">
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('junyou.app') !== -1) {
    //  这是app环境
    var navbar = document.getElementById('navbar')
    navbar.style.display = 'none'
  }
  var imageUrl = getUrlParam("imgUrl") + "/left.png";
  $("#backImg").attr("src", imageUrl);
  var name = decodeURIComponent(getUrlParam("name"));
  $(".text").html(name);
  document.addEventListener("UniAppJSBridgeReady", function () {
    document
      .querySelector(".back-icon")
      .addEventListener("click", function (evt) {
        var target = evt.target;
        uni.navigateBack({
          delta: 1,
        });
      });
  });
  var pdfDoc = null;
  var pages = 0;
  function loadFile (url) {
    PDFJS.workerSrc = "pdf.worker.js";
    PDFJS.getDocument(url).then((pdf) => {
      pdfDoc = pdf;
      pages = pdfDoc.numPages;
      renderPage(1);
      createSeriesCanvas(pages, "the-canvas");
    });
  }
  /**
   * 创建和pdf页码等数的canvas
   */
  function createSeriesCanvas (num, template) {
    var id = "";
    for (var j = 1; j <= num; j++) {
      id = template + j;
      $("#body").append('<canvas id="' + id + '" class="page"></canvas>');
    }
  }
  function renderPage (num) {
    pdfDoc.getPage(num).then((page) => {
      let canvas = document.getElementById("the-canvas" + num);
      let ctx = canvas.getContext("2d");
      let dpr = window.devicePixelRatio || 1;
      let bsr =
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio ||
        1;
      let ratio = dpr / bsr;
      let viewport = page.getViewport(
        (screen.availWidth - 50) / page.getViewport(0.9).width
      );
      canvas.width = viewport.width * ratio;
      canvas.height = viewport.height * ratio;
      canvas.style.width = viewport.width + "px";
      canvas.style.height = viewport.height + "px";
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      let renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };
      page.render(renderContext);
      if (pages > num) {
        renderPage(num + 1);
      }
    });
  }

  function getUrlParam (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); // 匹配目标参数
    if (r != null) return r[2];
    return null; // 返回参数值
  }

  loadFile(getUrlParam("url"));
</script>

</html>